<template>
  <div class= "app">
       <Category title="美食">
           <img  slot = "s1" :src="foodUrl">
           <a  slot="s2" href="https://www.baidu.com">更多美食</a>
       </Category >
       <Category title="游戏">
           <ul slot="s1">
               <li v-for="(game,index) in gameArr" :key="index">{{game}}</li>
           </ul>
           <div slot="s2">
             <a href="https://www.baidu.com">单机游戏</a>&nbsp;
             <a href="https://www.baidu.com">网络游戏</a>
           </div>
       </Category >
       <Category title="电影">
           <video  slot="s1" :src="movieUrl" controls></video>
           <div slot="s2">
            <a href="">经典</a>&nbsp;
            <a href="">热门</a>&nbsp;
            <a href="">推荐</a>
           </div>
       </Category >
    </div>
 
</template>

<script>
import Category from './components/Category'
export default {
  name: 'App',
  components: { Category },
  data() {
    return {
     foodUrl:'https://s3.ax1x.com/2021/01/16/srJlq0.jpg',
     gameArr:['英雄联盟手游','劲舞团','红色警戒','和平精英','QQ飞车'],
     movieUrl:'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4'
    }
  },
  
}
</script>

<style >
/*base*/
.app{
    display: flex;
    justify-content: space-around;
}
</style>